<template>
  <view class="discount-detail">
    <image :src="discountInfo.image" class="detail-image"></image>
    <view class="detail-content">
      <text class="detail-title">{{ discountInfo.title }}</text>
      <text class="detail-price">价格: ￥{{ discountInfo.price }}  <text class="original-price">原价: ￥{{ discountInfo.originalPrice }}</text></text>
      <text class="detail-desc">{{ discountInfo.description }}</text>
      <text class="detail-deadline">截止日期: {{ discountInfo.deadline }}</text>
      <text class="detail-phone">咨询电话: {{ discountInfo.phone }}</text>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { onLoad } from "@dcloudio/uni-app";

const discountInfo = ref({
  id: null,
  image: "",
  title: "",
  price: "",
  originalPrice: "",
  description: "",
  deadline: "",
  phone: "",
});

const discountData = {
  1: {
    id: 1,
    image: "/static/forbidden_city.jpg",
    title: "北京四日追花拍摄秘籍-故宫",
    price: "99.00",
    originalPrice: "199.00",
    description: "丰富的业主周末生活，提高幸福感，四日追花摄影攻略，专业导游带队。",
    deadline: "2022-10-10 23:59",
    phone: "0379-66666666",
  },
  2: {
    id: 2,
    image: "/static/great_wall.jpg",
    title: "长城秋日摄影之旅",
    price: "129.00",
    originalPrice: "259.00",
    description: "秋季限定摄影之旅，感受长城壮丽秋色，摄影大师全程指导。",
    deadline: "2022-10-15 23:59",
    phone: "0379-88888888",
  }
};

onLoad((options) => {
  if (options.id && discountData[options.id]) {
    discountInfo.value = discountData[options.id];
  }
});
</script>

<style>
.discount-detail {
  padding: 10px;
}
.detail-image {
  width: 100%;
  height: 250px;
}
.detail-content {
  padding: 10px;
}
.detail-title {
  font-size: 18px;
  font-weight: bold;
}
.detail-price {
  color: red;
  font-size: 16px;
}
.original-price {
  text-decoration: line-through;
  color: gray;
  font-size: 14px;
}
.detail-desc, .detail-deadline, .detail-phone {
  margin-top: 10px;
  font-size: 14px;
}
</style>
